<!doctype html>
<html>
<head>
<meta charset="utf-8">
<TITLE>论坛--看贴</TITLE>
<Link rel="stylesheet" type="text/css" href="style/style.css" />
	<script src="http://47.106.66.89:8080/js/vue.min.js"></script>
	<script src="http://47.106.66.89:8080/js/axios.min.js"></script>
	<link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
	<script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
</HEAD>

<BODY>
<div id="app">
	<bbs>
		<!--      主体        -->
		<DIV><br/>
			<!--      导航        -->
			<DIV>
				&gt;&gt;<B><a href="index.html">论坛首页</a></B>&gt;&gt;
				<B><a href="list.html">灌水乐园</a></B>
			</DIV>
			<br/>
			<!--      回复、新帖        -->
			<DIV>
				<A :href="'reply.html?id=' + topic.id"><IMG src="image/reply.gif"  border="0" ></A>
				<A :href="'post.html?id=' + topic.boardid"><IMG src="image/post.gif"   border="0" ></A>
			</DIV>
			<!--         翻 页         -->
			<DIV>
				<a href="detail.html">上一页</a>|
				<a href="detail.html">下一页</a>
			</DIV>
			<!--      本页主题的标题        -->
			<DIV>
				<TABLE cellSpacing="0" cellPadding="0" width="100%">
					<TR>
						<TH class="h">本页主题: 灌水</TH>
					</TR>
					<TR class="tr2">
						<input type="submit" value="收藏本贴" @click="storeTopic">
						<TD>&nbsp;</TD>
					</TR>
				</TABLE>
			</DIV>


			<div style="height: 500px; overflow-y: auto" v-infinite-scroll="load" infinite-scroll-delay="400">
				<!--      主题        -->
				<DIV class="t">
					<TABLE style="BORDER-TOP-WIDTH: 0px; TABLE-LAYOUT: fixed" cellSpacing="0" cellPadding="0" width="100%">
						<TR class="tr1">
							<TH style="WIDTH: 20%">
								<B>{{topic.user.cname}}</B><BR/>
								<image :src="topic.user.head"/><BR/>
								注册:{{topic.user.regtime}}<BR/>
							</TH>
							<TH>
								<H4>{{topic.title}}</H4>
								<DIV v-html="topic.content"></DIV>
								<DIV class="tipad gray">
									发表：{{topic.publishtime}} &nbsp;
									最后修改:{{topic.modifytime}}
								</DIV>
								<A :href="'reply.html?id=' + topic.id"><IMG src="image/reply.gif"  border="0" ></A>
							</TH>
						</TR>
					</TABLE>
				</DIV>

				<!--      回复        -->
				<DIV class="t" v-for="r in replys">
					<TABLE style="BORDER-TOP-WIDTH: 0px; TABLE-LAYOUT: fixed" cellSpacing="0" cellPadding="0" width="100%">
						<TR class="tr1">
							<TH style="WIDTH: 20%">
								<B>{{r.user.cname}}</B><BR/>
								<image :src="r.user.head"/><BR/>
								注册:{{r.user.regtime}}<BR/>
							</TH>
							<TH>
								<H4>{{r.title}}</H4>
								<DIV v-html="r.content"></DIV>
								<DIV class="tipad gray">
									发表：{{r.publishtime}} &nbsp;
									最后修改:{{r.modifytime}}
								</DIV>
								<A :href="'reply.html?id=' + topic.id"><IMG src="image/reply.gif"  border="0" ></A>
							</TH>
						</TR>
					</TABLE>
				</DIV>
			</div>
		</DIV>

	</bbs>
</div>


<!--      声明        -->
<BR>
<CENTER class="gray">源辰信息</CENTER>
</BODY>

<script>
	var v = new Vue({
		el : "#app",
		data : {
			topic:{user:{}},
			replys:[],
			page:1,
			myinfo:{}
		},
		created() {
			axios.get("topic/queryById"+location.search)
					.then(res=>this.topic = res.data);
			axios.get("user/myinfo")
					.then(res=> {
						this.myinfo = res.data.data;
					});

		},
		methods : {
			load(){
				if(this.page == 0){
					return;
				}
				axios.get("reply/queryByTid"+location.search.replace("id", "tid"), {
					params:{
						page : this.page,
						rows : 5
					}
				}).then(res=> {
					this.replys = this.replys.concat(res.data.records);
					if(res.data.records.length == 5){
						this.page++
					}else{
						this.page = 0
					}
				});
			},
			storeTopic(){
				let p = new URLSearchParams()
				p.append("uid", this.myinfo.id)
				p.append("tid", this.topic.id)
				axios.post("store/storeTopic", p).then(res=>{
					if (res.data.code == 1) {
						this.$message(res.data.msg)
					}else{
						this.$alert(res.data.msg)
					}
				})
			}
		}
	})
</script>
</HTML>

